<script setup lang="ts">
import { ref } from 'vue'
import PulpingMachine2D from '@/components/device/PulpingMachine2D.vue'
import { useDeviceMaintenancePartHomeStore } from '../../stores/device-maintenance/part-home'

const partHomeStore = useDeviceMaintenancePartHomeStore()

if (!partHomeStore.isConnected) {
  partHomeStore.connectServerAsync().then(async () => {
    if (partHomeStore.isNeedLoadParts) {
      partHomeStore.updatePartsAsync()
    }
  })
} else {
  if (partHomeStore.isNeedLoadParts) {
    partHomeStore.updatePartsAsync()
  }
}
</script>

<template>
  <main class="main-container" v-loading="partHomeStore.isLoading">
    <div class="search-container">
      <el-text type="info" class="mx-1">项目名称:</el-text>
      <div style="margin-left: 8px">
        <el-select v-model="partHomeStore.currentProjectName" style="width: 240px">
          <el-option
            v-for="item in partHomeStore.projectNames"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>
    </div>
    <el-scrollbar class="content-container">
      <div style="width: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap">
        <div
          v-for="item in partHomeStore.parts"
          :key="item.partName"
          style="margin-right: 20px; margin-bottom: 20px"
        >
          <PulpingMachine2D
            v-model:partName="item.partName"
            v-model:part-id="item.id"
          ></PulpingMachine2D>
        </div>
      </div>
    </el-scrollbar>
  </main>
</template>

<style scoped>
.main-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.content-container {
  padding: 30px 30px 20px;
  margin-top: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  height: 100%;
}

.search-container {
  padding: 30px 30px 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
}
</style>
